<template>
  <v-container>
    <v-layout
      text-xs-center
      wrap
    >
      <v-flex xs12>
        <v-img
          :src="require('../assets/img/logo.svg')"
          class="my-3"
          contain
          height="200"
        />
      </v-flex>

      <v-flex mb-4>
        <h1 class="display-2 font-weight-bold mb-3">
          互联网应用开发技术
        </h1>
        <p class="subheading font-weight-regular">
          大噶吼，我不是渣渣辉，是兄弟就来砍我
        </p>
      </v-flex>

      <v-flex
        mb-5
        xs12
      >
        <h2 class="headline font-weight-bold mb-3">
          主要技术栈
        </h2>

        <v-layout justify-center>
          <a
            v-for="(item, i) in mainTechStack"
            :key="i"
            :href="item.href"
            class="subheading mx-3"
            target="_blank"
          >{{ item.text }}</a>
        </v-layout>
      </v-flex>

      <v-flex mb-6>
        <h2 class="headline font-weight-bold mb-3">
          LICENSE
        </h2>
        <a href="http://www.wtfpl.net/"><img
          src="http://www.wtfpl.net/wp-content/uploads/2012/12/wtfpl-badge-1.png"
          width="80"
          alt="WTFPL"
        ></a>
      </v-flex>
    </v-layout>
  </v-container>
</template>

<script>
export default {
  data: () => ({
    mainTechStack: [
      {
        text: 'Vue',
        href: 'https://cn.vuejs.org/index.html',
      },
      {
        text: 'Vue CLI',
        href: 'https://cli.vuejs.org/zh/',
      },
      {
        text: 'Vue Router',
        href: 'https://router.vuejs.org/zh/',
      },
      {
        text: 'Vuetify',
        href: 'https://vuetifyjs.com/zh-Hans/',
      },
    ],
  }),
};
</script>

<style>
</style>
